var cont = document.querySelector('.cont')
var page = document.querySelector('.page')
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var swiper = document.querySelector('.swiper')
var index = 0;
var look = true
swiper.appendChild(swiper.children[0].cloneNode(true))


for (var i = 0; i < swiper.children.length-1; i++) {
    var div = document.createElement('div')
    div.index = i
    page.appendChild(div)
    div.onclick = function(){
        index = this.index
        swiper.style.left = -index * 740 + 'px'
        swiper_page()
    }
}
right.onclick = function() {
    if (!look) return
    look = false
    setTimeout(function() {
        look = true
    }, 500)

    index++
    swiper.style.transition = 'all .5s'
    if (index == swiper.children.length - 1) {
        setTimeout(function() {
            index = 0
            swiper.style.transition = 'none'
            swiper.style.left = -index * 740 + 'px'
        }, 500)
    }
    swiper.style.left = -index * 740 + 'px'
    swiper_page()
}

left.onclick = function() {
    if (!look) return
    look = false
    setTimeout(function() {
        look = true
    }, 500)

    index--
    if (index < 0) {
        swiper.style.transition = 'none'
        index = swiper.children.length - 1
        setTimeout(function() {
            index--
            swiper.style.transition = 'all .5s'
            swiper.style.left = -index * 740 + 'px'
            swiper_page()
        }, 0)
    }
    swiper.style.left = -index * 740 + 'px'
    swiper_page()
}


var item = setInterval(function() {
    right.onclick()
}, 3000)

cont.onmouseenter = function() {
    clearInterval(item)
    item = null
}
cont.onmouseleave = function() {
    item = setInterval(function() {
        right.onclick()
    }, 3000)
}



function swiper_page(){
    for(var i = 0 ; i < page.children.length ; i++){
            page.children[i].style.background = '#000' 
    }
    if(index >= swiper.children.length-1 ){
        page.children[0].style.background = 'red' 
    }else if(index < 0 ){
        page.children[page.children.length-1].style.background = '#000' 
    }else{
        page.children[index].style.background = 'red'
    }
}